<script setup>
import {
  GetListAPI,
  AddDataAPI,
  GetViewAPI,
  EditDataAPI,
  DelDataAPI,
} from "@/api/device/maintenance/project.js";

import Form from "./form.vue";
const { proxy } = getCurrentInstance();
/**
 * 封装 方法 字典查询
 */
const { maintenance_project_level, sys_project_type } = proxy.useDict(
  "maintenance_project_level",
  "sys_project_type"
);

/**
 * 回显数据
 */
const ruleForm = ref({});

/**
 * 表格数据
 */
const tableData = ref([]);

/**
 * 按钮枚举
 */
const btnList = ref([
  {
    label: "新增",
    type: "add",
    hasPermi: "device:project:add",
  },

  { type: "import", hasPermi: "system:equipment:import" },
  {
    type: "export",
    hasPermi: "device:project:add",
  },
]);

const a = {
  b: "name",
  name: "30",
  label: "表头",
};

/**
 * 状态
 */
const state = reactive({
  title: "新增",
  loading: false, // 表格加载状态
  total: 0, // 列表总数量
  ids: [], // 勾选id
  rows: [], // 勾选数据
  btnLoading: false, // 保存按钮加载
  isShow: false, // 弹窗
  singleDis: false, // 多选后禁用
  multipleDis: false, // 没有选择后禁用
});

/**
 * 分页参数
 */
const query = reactive({
  pageNum: 1,
  pageSize: 10,
});

/**
 * 查询枚举
 */
const selectList = ref([
  {
    label: "项目编号",
    model: "maintenanceProjectCode",
    type: "输入框",
  },
  {
    label: "项目名称",
    model: "maintenanceProjectName",
    type: "输入框",
  },

  {
    label: "保养级别",
    model: "maintenanceLevel",
    type: "下拉单选",
    opt: maintenance_project_level,
  },
  {
    label: "项目类型",
    model: "projectType",
    type: "下拉单选",
    opt: sys_project_type,
  },
]);

/**
 * 列表枚举
 */
const column = ref([
  { label: "项目编号", prop: "maintenanceProjectCode", width: "160px" },
  { label: "设备名称", prop: "deviceName", width: "120px" },
  { label: "项目名称", prop: "maintenanceProjectName", width: "120px" },
  { label: "维保部位", prop: "maintenancePosition", width: "120px" },
  { label: "计划指令", prop: "paleInstructStr", width: "120px" },
  { label: "维保内容", prop: "maintenanceContent", width: "120px" },
  { label: "备件或耗材型号", prop: "consumables", width: "120px" },
  { label: "项目类型", prop: "projectTypeDict", width: "120px" },
  { label: "维保级别", prop: "maintenanceLevelDict", width: "120px" },
  { label: "标准工时", prop: "workingHour", width: "120px" },
  { label: "维保数量", prop: "maintenanceNum", width: "120px" },
  { label: "备注", prop: "remark", width: "120px" },
  { label: "创建人", prop: "createBy", width: "120px" },
  { label: "创建时间", prop: "createTime", width: "120px" },
  { label: "操作", prop: "x", width: "300px" },
]);

/**
 * 勾选列表数据时
 * @param {*} param0
 */
const handleSelectionChange = ({ ids, row }) => {
  state.ids = ids;
  state.rows = row;
  state.multipleDis = !row.length;
  state.singleDis = row.length != 1;
};
handleSelectionChange({ ids: [], row: [] });

/**
 * 条件查询
 * @param {*} val
 */
const selectSubmit = (val) => {
  Object.keys(val).forEach((t) => (query[t] = val[t]));
  getList();
};

/**
 * 新增弹窗
 */
const addDic = () => {
  state.title = "新增";
  state.isShow = true;
};

/**
 * 修改弹窗
 * @param {*} id 列表id
 */
const editDic = async (id) => {
  proxy.loading();
  try {
    const res = await GetViewAPI(id);
    Object.keys(res.data).forEach((t) => (ruleForm.value[t] = res.data[t]));
    state.title = "修改";
    state.isShow = true;
  } catch (error) {
  } finally {
    proxy.closeLoading();
  }
};

/**
 * 查看弹窗
 * @param {*} id 列表id
 */
const lookDic = async (id) => {
  proxy.loading();
  try {
    const res = await GetViewAPI(id);
    Object.keys(res.data).forEach((t) => (ruleForm.value[t] = res.data[t]));
    state.title = "查看";
    state.isShow = true;
  } catch (error) {
  } finally {
    proxy.closeLoading();
  }
};

/**
 * 复制弹窗
 */
const copyAdd = async (id) => {
  proxy.loading();
  try {
    const res = await GetViewAPI(id);
    Object.keys(res.data).forEach((t) => (ruleForm.value[t] = res.data[t]));
    state.title = "复制新增";
    state.isShow = true;
  } catch (error) {
  } finally {
    proxy.closeLoading();
  }
};

/**
 * 关闭弹窗
 */
const close = () => {
  state.isShow = false;
  Object.keys(ruleForm.value).forEach((t) => (ruleForm.value[t] = ""));
};

/**
 * 新增提交
 */
const addSub = async () => {
  const result = await proxy.$refs.formRef.submit();
  if (!result) return;
  state.btnLoading = true;
  try {
    await AddDataAPI(result);
    proxy.successMsg("新增成功!");
    close();
    getList();
  } catch {
  } finally {
    state.btnLoading = false;
  }
};

/**
 * 修改提交
 */
const editSub = async () => {
  const result = await proxy.$refs.formRef.submit();
  if (!result) return;
  state.btnLoading = true;
  try {
    await EditDataAPI(result);
    proxy.successMsg("修改成功!");
    close();
    getList();
  } catch {
  } finally {
    state.btnLoading = false;
  }
};

/**
 * 删除
 * @param {*} id 列表id
 */
const remove = async (id) => {
  proxy.loading("删除中，请稍后...");
  try {
    await DelDataAPI(id);
    proxy.successMsg("删除成功!");
    getList();
  } catch (error) {
  } finally {
    proxy.closeLoading();
  }
};

/**
 * 批量删除
 */
const batchRemove = async () => {
  proxy.loading();
  try {
    await DelDataAPI(state.ids);
    proxy.successMsg("删除成功!");
    getList();
  } catch (error) {
  } finally {
    proxy.closeLoading();
  }
};

/**
 * 获取列表
 */
const getList = async () => {
  state.loading = true;
  try {
    const result = await GetListAPI(query);
    tableData.value = result.rows;
    state.total = result.total;
  } catch {
  } finally {
    state.loading = false;
  }
};
getList();
</script>

<template>
  <div class="app-container">
    <!-- 查询条件组件 -->
    <p-select-form :selectForm="selectList" @selectSubmit="selectSubmit" />
    <el-card class="box-card">
      <p-table
        :loading="state.loading"
        keyId="id"
        :column="column"
        :data="tableData"
        @change="handleSelectionChange"
        :total="state.total"
        v-model:page="query.pageNum"
        v-model:limit="query.pageSize"
        @pagination="getList"
      >
        <template #buttons>
          <!-- 按钮组件 -->
          <p-button
            :list="btnList"
            @add="addDic"
            @remove="batchRemove"
            @export="
              proxy.download('/equipment/maintenance-project/itemExport', {})
            "
            @import="getList"
            :url="'/equipment/maintenance-project/itemExportError'"
            :templateUrl="'/equipment/maintenance-project/importTemplate'"
            :importUrl="'/equipment/maintenance-project/importData'"
          />
        </template>
        <template #columnCell="{ column, record }">
          <p-operate
            v-if="column.prop == 'x'"
            :list="[
              {
                icon: 'Plus',
                emit: 'copyAdd',
                text: '复制新增',
                type: 'primary',
                hasPermi: 'maintenance:project:copyAdd',
              },
              {
                icon: 'Edit',
                emit: 'edit',
                text: '修改',
                type: 'primary',
                hasPermi: 'maintenance:project:edit',
              },
              {
                icon: 'Delete',
                emit: 'remove',
                text: '删除',
                isDel: true,
                type: 'danger',
                hasPermi: 'maintenance:project:remove',
              },
              {
                icon: 'Search',
                emit: 'look',
                text: '查看',
                type: 'primary',
                hasPermi: 'maintenance:project:query',
              },
            ]"
            @copyAdd="copyAdd(record.id)"
            @edit="editDic(record.id)"
            @remove="remove(record.id)"
            @look="lookDic(record.id)"
          />
        </template>
      </p-table>
    </el-card>
    <!-- 新增 -->
    <p-dialog
      v-model="state.isShow"
      :title="state.title"
      :loading="state.btnLoading"
      @close="close"
      @ok="
        state.title == '新增' || state.title == '复制新增'
          ? addSub()
          : editSub()
      "
      width="50%"
    >
      <Form
        ref="formRef"
        :data="ruleForm"
        :title="state.title"
        :disabled="state.title == '查看'"
      />
    </p-dialog>
  </div>
</template>
<style scoped lang="scss"></style>
